<template>
  <div role="tabpanel" class="tab-panel" id="News">
    <ul class="list-group" v-for="item in news" :key="item.id">
        <li class="list-group-item">
            {{item.title}}
            <!-- 这样写用的router-view 声明式导航 改变结构 -->
            <!-- <router-link>
                <button type="button" class="btn btn-primary" data-toggle="button"
                    aria-pressed="false" autocomplete="off">{{item.id}}
                </button>
            </router-link> -->
            <!-- 编程式导航  用$router.push添加  $router.replace -->
            <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off" @click="handler(item)">
                {{item.id}}
            </button>
        </li>
    </ul>
    <div class="alert alert-success" role="alert">
        <!-- 三级路由 -->
        <router-view></router-view>
    </div>
</div>
</template>

<script>
export default {
  name: 'News',
  data(){
    return {
        news :[
            {id:1,title:'重大新闻，睡眠不足会脑子坏掉'},
            {id:2,title:'明天世界杯第二天'},
            {id:3,title:'双十二大攻略'},
        ]
    }
  },
  methods:{
    //  点击按钮 跳转去三级路由
    handler(item){
        console.log(item);
        // console.log(this.$router);
        // $router.push 和 $router.replace 用法和to一样
        this.$router.push({
            name:'newsdetail',
            params:{
                id:item.id,
            },
            query:{
                title:item.title,
            }
        })


      // replace 替换掉当前最新的历史记录的
        // this.$router.replace({
        //     name:'newsdetail',
        //     params:{
        //         id:item.id,
        //     },
        //     query:{
        //         title:item.title,
        //     }
        // })
    }
  },
  mounted(){

  },
}
</script>

<style scoped>

</style>
]